{% extends "baseD.html" %}

{% block headtitle %}{% endblock %}

{% block css %} {% endblock %}

{% block scripts %} 
    <script type="text/javascript" src="/live3dstatic/scripts/slideshow.js"></script>
{% endblock %}

{% block onload %} {% endblock %}

{% block divtitle %}{% endblock %}

{% block content %}
    <div id="centercontent" style="overflow-x:hidden;">
        <div id="slideshow" style="float:right;">
            <div class="sliderbutton" id="slideleft" onclick="slideshow.move(-1)"></div>
            <div id="slider">
                <ul>
                    <li><img src="/live3dstatic/images/slideshow/arizona.jpg" width="420" height="270" alt="University of Arizona" /></li>
                    <li><img src="/live3dstatic/images/slideshow/newyork.jpg" width="420" height="270" alt="New York City" /></li>
                    <li><img src="/live3dstatic/images/slideshow/vanderbilt.jpg" width="420" height="270" alt="Vanderbilt University" /></li>
                </ul>
            </div><!-- end slider -->
            <div class="sliderbutton" id="slideright" onclick="slideshow.move(1)"></div>
            <ul id="pagination" class="pagination">
                <li onclick="slideshow.pos(0)"></li>
                <li onclick="slideshow.pos(1)"></li>
                <li onclick="slideshow.pos(2)"></li>
            </ul>
        </div><!-- end div slideshow -->

        <div class="text">
            <p> Live3D is a web-based application that allows users to update the textures in Google Earth to show what the world looks like at this very moment.</p>
	        <p> With just a few clicks, Live3D can calibrate images and infer the camera's location and orientation,
	    so pinpointing the window where the picture was taken from for the <a href="vfyw.html" title="Click here to go to the View From Your Window page">View From Your Window</a> contest becomes much easier.</p>
            <p> Curious to try it out?</p>
            <div id="button" style="margin-left:60px;margin-bottom:40px;"><a href = "contribute.html">Click Here</a></div>
        </div><!-- end text -->
    </div><!-- end sidecontent -->
	
    
{% endblock %}

{% block scripts2 %}
    <script type="text/javascript">
	var slideshow=new TINY.slider.slide('slideshow',{
	id:'slider',
	auto:3,
	resume:false,
	vertical:false,
	navid:'pagination',
	activeclass:'current',
	position:0,
	rewind:false,
	elastic:true,
	left:'slideleft',
	right:'slideright'
	});
    </script>
{% endblock %} 
    